<!DOCTYPE html>
<html lang="en" xml:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>菜单权限管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<div class="menu-table">
    <table id="menuTable" class="layui-table" lay-filter="menuTable"></table>
</div>
<div id="menuTree"></div>
</body>
<script src="/layui/layui.js"></script>
<script src="/js/core.util.js"></script>
<script>
    layui.config({
        base: "/"
    }).extend({
        treetable: "treetable-lay/treetable"
    }).use(["treetable", "table", "tree", "jquery", "form"], function () {
        var $ = layui.jquery;
        var tree = layui.tree;
        var table = layui.table;
        var treetable = layui.treetable;
        var form = layui.form;
        CoreUtil.sendAjax("/api/permissions", null, function (res) {
            renderTable(res.data);
        }, "GET", false);

        /*初始化菜单权限列表数据*/
        var renderTable = function(data) {
            treetable.render({
                // 渲染表格
                data: data,
                treeColIndex: 1, // 树形图标显示在第几列
                treeSpid: 0, // 最上级的父级id
                treeIdName: 'id', // id字段的名称
                treePidName: 'pid', // pid字段的名称
                treeDefaultClose: false, // 是否默认折叠
                treeLinkage: false, // 父级展开时是否自动展开所有子级
                elem: '#menuTable', // 表格id
                page: false, // 树形表格一般是没有分页的
                toolbar: '#toolbar',
                cols: [
                    [
                        {type: 'numbers'},
                        {field: 'name', title: '菜单名称'},
                        {field: 'url', title: 'url'},
                        {field: 'method', title: '请求方式'},
                        {
                            field: 'type', title: '类型', templet: function(item){
                                if(item.type === 1){
                                    return '  <a class="layui-btn layui-btn-xs" >目录</a>';
                                }
                                if(item.type === 2){
                                    return '<a class="layui-btn layui-btn-xs layui-btn-normal" >菜单</a>';
                                }
                                if(item.type === 3){
                                    return '<a class="layui-btn layui-btn-xs layui-btn-warm " >按钮</a>';
                                }
                            }
                        },
                        {field: 'pidName', title: '父级名称',templet:function (item) {
                                if(item.pidName ===null || item.pidName=== undefined){
                                    return "默认顶级菜单";
                                }else {
                                    return item.pidName;
                                }
                            }},
                        {field: 'orderNum', title: '排序'},
                        {field: 'perms', title: '资源标识'},
                        {field: 'code', title: '前后端分离按钮控制标识'},
                        {
                            field: 'createTime', title: '创建时间', minWidth: 120 , templet: function (item) {
                                return CoreUtil.formattime(item.createTime);
                            }
                        },
                        {
                            field: 'status', title: '状态',templet: function (item) {
                                if(item.status === 1){
                                    return  '  <input type="checkbox" lay-skin="switch" lay-text="启用|禁用" checked disabled>';
                                }
                                if(item.status === 0){
                                    return  '  <input type="checkbox" lay-skin="switch" lay-text="启用|禁用" disabled>';
                                }
                            }
                        },
                        {title:'操作',width:180,toolbar:'#tool'}
                    ]
                ]
            });
        };

        // 初始化菜单权限树
        var initTree = function () {
            CoreUtil.sendAjax("/api/permissionTree", null, function (res) {
                renderTree(res.data);
            }, "GET", false);
        };

        // 渲染数据
        var renderTree = function (data) {
            tree.render({
                elem: "#menuTree",
                data: data,
                onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                click: function (obj) {
                    selectNode = obj;  // 记录选中的目录菜单
                    layer.msg(JSON.stringify(obj.data, title));
                }
            });
        };

        initTree();
    })
</script>
</html>